import "./_style.scss";
import { Link, useLocation } from "react-router-dom";
import { Menu, Layout, Button } from "antd";
import { HomeOutlined } from "@ant-design/icons"
import { useEffect } from "react";
import { user } from "../../api/api";
import { useDispatch, useSelector } from "react-redux";
import { handleUrlQuery } from "../../hooks/methods";
import UserRouter from "../../Router/UserRouter";
import { saveUserInfo } from "../../redux/reduces/user";
const {Header, Sider, Content} = Layout;
const User = () => {
  const dispatch = useDispatch();
  const token = useSelector(state => state.user.loginInfo.token);
  const urlQuery = useLocation().search;
  const { title } = handleUrlQuery(urlQuery);
  useEffect(() => {
    user({token}).then(res => {
      dispatch(saveUserInfo(res));
    })
  }, [token]);
  return (
    <div className="user">
    <div className="back_home">
      <Link to="/home">
        <Button type="primary" shape="circle" icon={<HomeOutlined />} size="large" />
      </Link>
    </div>
    <Layout className="user_container">
      <Sider className="user_sider">
      <div className="menu">
        <Menu>
          <Menu.Item>
            <Link to="/user/info?title=个人信息">
              个人信息
            </Link>
          </Menu.Item>
          <Menu.Item>
            <Link to="/user/list?title=文章列表">
              文章列表
            </Link>
          </Menu.Item>
        </Menu>
      </div>
      </Sider>
      <Layout className="user_layout">
        <Header className="user_header">{title}</Header>
        <Content className="user_content">
          <UserRouter></UserRouter>
        </Content>
      </Layout>
    </Layout>
    </div>
  )
}

export default User;